<template>
    <div class="comment-reply" v-show="isShow">
        <div class="background" @click="closeReply"></div>
        <div class="reply-container">
            <div class="reply-header">
                <div class="title" @click="replyTop">
                    <span>回复</span>
                    <span class="comment-author">{{ respondent }}</span>
                </div>
                <div class="close-bt" @click="closeReply">X</div>
            </div>
            <!-- <div class="comment-box"></div> -->
            <div class="reply-box">
                <div class="reply-box-header">
                    <div class="title-box">
                        <p>全部回复</p>
                        <span>{{ totalComment }}</span>
                    </div>
                </div>
                <div class="comment-box" v-for="(item, index) in comment" :key="index">
                    <img :src="item.profilePath" class="avatar" />
                    <div class="comment-box-right">
                        <div class="user-info">
                            <p class="user-name">
                                {{ item.nickName }} 
                                <span class="reply-to" v-if="item.replyCommentId">回复<span class="reply-to-name">@{{ item.replyName }}:</span></span>
                            </p>
                            <PersonalType :role="item.roleId" />

                        </div>
                        <p class="comment">{{ item.content }}</p>
                        <div class="comment-detail">
                            <div class="time">
                                {{ item.publishTime }}
                            </div>
                            <div class="like-box" @click="item.likeNum++;">
                                <img src="../../assets/icons/Like.svg" alt="">

                                <span>{{ item.likeNum }}</span>
                            </div>

                            <div class="reply-bt" @click="toReply(item.commentId,item.userId,item.nickName,totalComment - index)"><span>回复</span></div>
                            <span class="item-num">{{ totalComment - index }}楼</span>
                        </div>
                    </div>
                </div>
                <div class="no-comment" v-if="!showComment">
                    <p>暂无评论，快抢沙发吧~</p>
                </div>
                <CommentInput ref="commentInputBlock" :name="respondentName" @submitComment="handleSubmit"/>
            </div>
        </div>

    </div>
</template>
<script setup>
import { ref } from "vue";
import CommentInput from "./CommentInput.vue";
import gsap from "gsap";
import { GetNextComment } from "@/api/front/contest";
import PersonalType from "../PersonalType.vue";
import store from "@/store";
const isShow = ref(false);
const topId = ref()
const topUserId = ref()
const respondentName = ref()
const respondent = ref("");
const comment = ref([])
const commentInputBlock = ref(null)
const showComment = ref(false)
const closeReply = () => {
    gsap.to(".reply-container", {
        duration: 0.3,
        marginTop: 600,
    });
    gsap.to(".comment-reply", {
        duration: 0.5,
        opacity: 0,
        onComplete: () => {
            isShow.value = false;
        },
    });
    comment.value = []
    topId.value = ''
    respondent.value = ''
    respondentName.value = ''
    store.commit("setCommentProperty", { key: "replyCommentId", value: "" });
    store.commit("setCommentProperty", { key: "replyUserId", value: "" });

};
const showReply = (id,userId,name) => {
    gsap.to(".comment-reply", {
        duration: 0.1,
        opacity: 1,
        // 在动画之前
        onStart: () => {
            isShow.value = true;
            store.commit("setCommentProperty", { key: "topId", value: id });
            store.commit("setCommentProperty", { key: "replyUserId", value: userId });
            topUserId.value = userId
            topId.value = id
            respondent.value = name
            getNextComment()
        },
        onComplete: () => {
            gsap.to(".reply-container", {
                duration: 0.5,
                marginTop: 100,
            });
            commentInputBlock.value.focus()
        },
    });
};

const toReply = (id,userId,name,num) => {
    commentInputBlock.value.focus()
    store.commit("setCommentProperty", { key: "replyCommentId", value: id });
    store.commit("setCommentProperty", { key: "replyUserId", value: userId });
    respondentName.value = num + '楼' + name
}
const replyTop = () => {
    store.commit("setCommentProperty", { key: "replyCommentId", value: "" });
    store.commit("setCommentProperty", { key: "replyUserId", value: topUserId.value });
    respondentName.value = ''

}

const pageNum = ref(1)
const pageSize = ref(10)
const totalComment = ref(0)
const getNextComment = async () => {
    const data = {
        topId: topId.value,
        page_num: pageNum.value,
        page_size: pageSize.value,
    }
    const res = await GetNextComment(data)
    if (res.status == 200) {
        const resData = res.data
        pageNum.value = resData.pageNum
        comment.value = resData.pageList
        totalComment.value = resData.total
    }
    if (comment.value.length > 0) {
        showComment.value = true
    } else {
        showComment.value = false
    }
    console.log("res",res)
}

const handleSubmit = (msg) => {
    console.log("msg",msg)
    getNextComment()
}
// onMounted(() => {
// } )

// 暴露给父组件的方法
defineExpose({
    closeReply,
    showReply,
})

// const hotCommentArr = ref([
//     {
//         avatar: "https://img2.baidu.com/it/u=4195270276,3803843082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
//         username: "张三",
//         usertype: "老师",
//         comment_time: "2023-03-23",
//         comment_content: "打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！",
//         like: "55",
//         unlike: "0"
//     },
//     {
//         avatar: "https://img2.baidu.com/it/u=1790834130,1952230725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
//         username: "李四",
//         usertype: "观众",
//         comment_time: "2023-03-23",
//         comment_content: "打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！",
//         like: "9",
//         unlike: "1"
//     },
//     {
//         avatar: "https://img2.baidu.com/it/u=1790834130,1952230725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
//         username: "李四",
//         usertype: "观众",
//         comment_time: "2023-03-23",
//         comment_content: "打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！",
//         like: "9",
//         unlike: "1"
//     },
//     {
//         avatar: "https://img1.baidu.com/it/u=1285375996,3783960243&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
//         username: "王五",
//         usertype: "老师",
//         comment_time: "2023-03-23",
//         comment_content: "打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！",
//         like: "16",
//         unlike: "3",
//         reply: [
//             {
//                 avatar: "https://img0.baidu.com/it/u=3508440535,3666595083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
//                 username: "老六",
//                 usertype: "观众",
//                 comment_time: "2023-03-23",
//                 comment_content: "打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！提高工作效率的电脑快捷键打工人必备！",
//                 like: "18",
//                 unlike: "0",
//             }
//         ]
//     },
// ])
</script>
<style scoped lang="scss">
.comment-reply {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100vh;
    width: 100vw;

    // background-color: #ccc;
    .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .background {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .reply-container {
        margin-top: 600px;
        margin-left: auto;
        margin-right: auto;
        max-width: 1024px;
        box-sizing: border-box;
        height: calc(100% - 100px);
        // background-color: white;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 80px;

        .reply-header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 60px;
            font-size: 20px;
            font-weight: bold;
            background-color: white;
            // border-radius: 5px;

            .title {

                span {}

                .comment-author {
                    color: #16899b;
                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
            }

            .close-bt {
                position: absolute;
                right: 20px;
                cursor: pointer;
            }
        }

        .reply-box {
            border-top: 10px solid #eeeeee;
            background-color: white;
            flex: 1;
            overflow-y: scroll;

            // &::-webkit-scrollbar {
            //     display: none;
            // }

            // border-radius: 5px;
            .reply-box-header {
                height: 50px;
                padding: 5px 20px;
                display: flex;
                align-items: center;

                .title-box {
                    display: flex;
                    align-items: center;

                    p {
                        font-weight: bold;
                    }

                    span {
                        font-size: 14px;
                        margin-top: 3px;
                        color: #bbb;
                        padding: 0px 5px;
                        display: flex;
                        justify-content: flex-end;
                    }
                }
            }

            .comment-box {
                display: flex;

                .avatar {
                    margin: 0px 20px;
                }

                .comment-box-right {
                    flex: 1;

                    .user-info {
                        display: flex;
                        flex-direction: column;
                        height: 60px;
                        justify-content: space-around;

                        .user-name {
                            padding: 0 5px;
                            
                            .reply-to {
                                font-size: 14px;
                                color: #bbb;
                                margin-left: 5px;

                                .reply-to-name {
                                    color: #16899b;
                                }
                            }
                        }

                        .user-type {
                            background-color: #ccc;
                            border-radius: 10px;
                            padding: 0 5px;
                            width: fit-content;
                        }
                    }

                    .comment {
                        margin: 10px 0px;
                    }

                    .comment-detail {
                        display: flex;
                        margin: 10px 0px;
                        position: relative;
                        width: 100%;
                        .time {
                            margin-right: 20px;
                        }

                        .like-box {
                            display: flex;
                            align-items: center;
                            margin-right: 20px;

                            img {
                                width: 20px;
                                height: 20px;
                            }

                            span {}
                        }

                        .reply-bt {
                            margin-right: 20px;
                            font-size: 14px;
                            font-weight: bold;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                                color: var(--color-green-2);
                            }
                        }
                        .item-num {
                            color: #bbb;
                            position: absolute;
                            right: 20px;
                        }
                    }
                }

            }
            .no-comment {
                text-align: center;
                margin: 20px 0;
            }
        }
    }
}</style>